<template>
  <el-dialog
    v-model="dialogSignVisible"
    :title="
      Judgewhattosign === '社保管理'
        ? userList[0]?.title
        : Judgewhattosign === '薪酬绩效'
        ? userList1[0]?.title
        : signData[0]?.title
    "
    @close="close"
    destroy-on-close
    width="70%"
  >
    <div class="dialogTip">
      <!-- 您好，请在{{ signTime }}之前确认{{ title }}数据，并进行会签 -->
      {{
        Judgewhattosign === "社保管理"
          ? userList[0]?.auditMsg
          : Judgewhattosign === "薪酬绩效"
          ? userList1[0]?.auditMsg
          : signData[0]?.msg
      }}
    </div>
    <!-- 社保 -->
    <el-table
      v-loading="loading"
      :data="userList"
      :header-cell-style="{ color: '#fff' }"
      v-if="Judgewhattosign === '社保管理'"
    >
      <el-table-column
        label="费用发生月"
        align="center"
        prop="importMonth"
        key="importMonth"
      >
      </el-table-column>
      <el-table-column
        label="费用名称"
        align="center"
        prop="title"
        key="title"
      />
      <el-table-column
        label="公司承担额"
        align="center"
        prop="companyMoney"
        key="companyMoney"
      />
      <el-table-column
        label="个人承担额"
        align="center"
        prop="personalMoney"
        key="personalMoney"
      />
      <el-table-column
        label="总金额"
        align="center"
        prop="totalMoney"
        key="totalMoney"
      />
      <el-table-column
        label="税率(%)"
        align="center"
        prop="taxRate"
        key="taxRate"
      />
      <el-table-column
        label="含税结算金额"
        align="center"
        prop="taxMoney"
        key="taxMoney"
      />
    </el-table>
    <!-- 薪酬 -->
    <el-table
      v-loading="loading"
      :data="userList1"
      :header-cell-style="{ color: '#fff' }"
      v-if="Judgewhattosign === '薪酬绩效'"
    >
      <el-table-column label="费用发生月" align="center" prop="importMonth">
      </el-table-column>
      <el-table-column label="费用名称" align="center" prop="title" />
      <el-table-column label="实发工资" align="center" prop="realSalarySum" />
      <el-table-column label="税率(%)" align="center" prop="taxRate" />
      <el-table-column label="含税结算金额" align="center" prop="taxMoney" />
    </el-table>
    <!-- 其他费用 -->
    <el-table
      v-loading="loading"
      :data="signData"
      :header-cell-style="{ color: '#fff' }"
      v-if="Judgewhattosign === '其他费用'"
    >
      <el-table-column label="费用发生月" align="center" prop="happenMonth">
      </el-table-column>
      <el-table-column label="费用名称" align="center" prop="title" />
      <el-table-column label="金额" align="center" prop="amount" />
      <el-table-column label="税率(%)" align="center" prop="taxRate" />
      <el-table-column label="含税结算金额" align="center" prop="taxIncluded" />
    </el-table>
    <el-form
      :model="form"
      label-position="right"
      label-width="100px"
      style="margin-top: 8px"
    >
      <el-form-item label="审核人：">
        <!-- <el-input v-model="form.name"  /> -->
        <span>{{ router.currentRoute.value.query.userName?`${router.currentRoute.value.query.userName}(${router.currentRoute.value.query.roleName})`:form.name }}</span>
      </el-form-item>
      <el-form-item label="审核意见：">
        <el-input
          v-model="AuditOpinion"
          placeholder="请输入审核意见(若审核拒绝此项为必填项）"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button color="#3175BE" @click="pass"> 审核通过 </el-button>
        <el-button color="#CC3339" @click="refuse">审核拒绝</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, reactive, ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

import {
  getSbHq,
  Examine,
  updateCountersign,
  pmOtherExpense,
  getXcHq,
  PayExamine,
} from "@/api/countersign/index";
const router = useRouter();

const props = defineProps({
  dialogSign: {
    type: Boolean,
  },
  title: {
    type: String,
  },
  Judgewhattosign: {
    type: String,
  },
  ID: {
    type: String,
  },
});
const userList = ref([]);
const userList1 = ref([]);
watch(
  () => props.dialogSign,
  () => {
    if (props.ID && props.dialogSign) {
      var params = {
        businessId: props.ID,
      };
      if (props.Judgewhattosign == "其他费用") {
        pmOtherExpense(props.ID).then((res) => {
          signData.value = [];
          signData.value.push(res.data);
          console.log(signData.value);
        });
      } else if (props.Judgewhattosign == "社保管理") {
        getSbHq(params).then((res) => {
          userList.value = [];
          userList.value.push(res.data);
        });
      } else if (props.Judgewhattosign == "薪酬绩效") {
        getXcHq(params).then((res) => {
          userList1.value = [];
          userList1.value.push(res.data);
        });
      }
    } else {
    }
  }
);

// 表格数据
const signData = ref([]);
// 表格loading
const loading = ref(false);
// 获取传入信息
const urlParams = new URLSearchParams(window.location.search);
// const id = urlParams.get("id");
const userName = urlParams.get("userName") ? urlParams.get("userName") : "无";
const roleName = urlParams.get("roleName") ? urlParams.get("roleName") : "无";
// 表单数据
const form = ref({
  name: `${userName}(${roleName})`,
  region: "",
});

const signTime = ref("4日15:03");
//
const emit = defineEmits(["dialogSignClose"]);
const dialogSignVisible = computed(() => props.dialogSign);

//关闭

const close = () => {
  emit("dialogSignClose");
};
//审核意见
const AuditOpinion = ref();
// 通过
const pass = () => {
  var params = {
    auditIdea: AuditOpinion.value,
    id:router.currentRoute.value.query.id?router.currentRoute.value.query.id: props.ID,
    operationType: 1,
  };
  var paramsCounters = {
    auditAdvice: AuditOpinion.value,
    auditResult: 1, //审核结果(1:通过，2：不通过)
    id: router.currentRoute.value.query.id?router.currentRoute.value.query.id: props.ID,
  };
  if (props.Judgewhattosign == "其他费用") {
    updateCountersign(paramsCounters).then((res) => {
      ElMessage({
        message: "操作成功",
        grouping: true,
        type: "success",
      });
      close();
    });
  } else if (props.Judgewhattosign == "社保管理") {
    Examine(params).then((res) => {
      ElMessage({
        message: "操作成功",
        grouping: true,
        type: "success",
      });
      close();
    });
  } else if (props.Judgewhattosign == "薪酬绩效") {
    PayExamine(params).then((res) => {
      ElMessage({
        message: "操作成功",
        grouping: true,
        type: "success",
      });
      close();
    });
  }
};
// 拒绝
const refuse = () => {
  if (!AuditOpinion.value) {
    ElMessage({
      message: "请填写审核意见",
      grouping: true,
      type: "warning",
    });
  } else {
    var params = {
      auditIdea: AuditOpinion.value,
      id:router.currentRoute.value.query.id?router.currentRoute.value.query.id: props.ID,
      operationType: 2,
    };
    var paramsCounters = {
      auditAdvice: AuditOpinion.value,
      auditResult: 2, //审核结果(1:通过，2：不通过)
      id: router.currentRoute.value.query.id?router.currentRoute.value.query.id: props.ID,
    };
    if (props.Judgewhattosign == "其他费用") {
      console.log(props.ID, "props.ID");
      updateCountersign(paramsCounters).then((res) => {
        console.log(res, "---");
        emit("dialogSignClose");
        ElMessage({
          message: "操作成功",
          grouping: true,
          type: "success",
        });
      });
    } else if (props.Judgewhattosign == "社保管理") {
      Examine(params).then((res) => {
        emit("dialogSignClose");
        ElMessage({
          message: "操作成功",
          grouping: true,
          type: "success",
        });
      });
    } else if (props.Judgewhattosign == "薪酬绩效") {
      PayExamine(params).then((res) => {
        console.log(res, "66666");
        emit("dialogSignClose");
        ElMessage({
          message: "操作成功",
          grouping: true,
          type: "success",
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.timeline {
  display: flex;
  width: 100%;
  height: 180px;
  margin: 8px auto 102px;
  overflow-x: scroll;
  overflow-y: hidden;
  .lineitem {
    transform: translateX(50%);
    width: 25%;
  }
}
:deep(.el-timeline-item__tail) {
  border-left: none;
  border-top: 2px solid #e4e7ed;
  width: 100%;
  position: absolute;
  top: 6px;
}
:deep(.el-timeline-item__wrapper) {
  padding-left: 0;
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
}
:deep(.el-timeline-item__timestamp) {
  font-size: 14px;
}
.active {
  :deep(.el-timeline-item__node) {
    background-color: #165dff;
    // background-color: $login_word;
  }
  :deep(.el-timeline-item__tail) {
    // border-color: $login_word;
    border-color: #165dff;
  }
}
.activeRed {
  color: red;
  :deep(.el-timeline-item__node) {
    background-color: red;
    // background-color: $login_word;
  }
  :deep(.el-timeline-item__tail) {
    // border-color: $login_word;
    // border-color: #165dff;
  }
}
.activeYellow {
  color: orange;
  :deep(.el-timeline-item__node) {
    background-color: orange;
    // background-color: $login_word;
  }
  :deep(.el-timeline-item__tail) {
    // border-color: $login_word;
    // border-color: #165dff;
  }
}
// 有active样式的下一个li
// .active + li {
//   :deep(.el-timeline-item__node) {
//     background-color: #165dff;
//   }
// }
.dialogTip {
  margin-bottom: 8px;
}
</style>
